<template>
  <div class="tab-box base-info">
    <div :class="!pageType ? 'add-tab-btn' : 'm-b-m'">
      <el-button type="primary" v-if="formItemList.length == 0 && !$route.query.parentFormKey" plain size="mini" @click="cloneForm">克隆</el-button>
      <template v-if="$route.query.primaryKey">
        <template v-if="!$route.query.parentFormKey">
          <el-button type="primary" plain size="mini" @click="preview('mobile')">mobile浏览</el-button>
          <el-button type="primary" plain size="mini" @click="preview('web')">pc浏览</el-button>
        </template>
        <el-button type="primary" plain size="mini" @click="showStyle('web')">web样式</el-button>
        <el-button type="primary" plain size="mini" @click="showStyle('mobile')">移动样式</el-button>
        <el-button type="primary" plain size="mini" @click="addForm('')">新增子表单</el-button>
        <el-button type="primary" plain size="mini" @click="addVersion">新增版本</el-button>
      </template>
    </div>
    <el-form :model="itemData" ref="baseInfo" size="small" :rules="rules" label-position="left" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="表单名称" prop="formName">
            <el-input maxlength="50" class="full-width" placeholder="请输入表单名称" v-model.trim="itemData.formName" :readonly="headerReadly"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="表单编码">
            <el-input class="full-width" v-model="itemData.formCode" disabled placeholder="保存后自动生成"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8" v-if="$route.query.primaryKey">
          <el-form-item label="版本号">
            <el-select class="full-width" v-model="itemData.formVersion" placeholder="请选择版本号" :disabled="headerReadly">
              <el-option v-for="(item, index) in versionsList" :key="index" :label="item.formVersion" :value="item.formVersion"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="表单说明" prop="formDesc">
            <el-input type="textarea" class="full-width" :autosize="{ minRows: 3, maxRows: 6 }" placeholder="请输入表单说明" v-model="itemData.formDesc" :readonly="headerReadly" maxlength="100" show-word-limit></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="子表单">
            <div class="child-box" v-for="(item, index) in childFormList" :key="index">
              <el-link :underline="false" type="primary" @click="addForm(item.primaryKey)">{{ item.formName }}</el-link>
              <i class="el-icon-delete el-icon--right" @click.stop="deleteChild(item)"></i>
            </div>
            <span class="text-color-ccc" v-if="childFormList.length == 0">暂无子表单</span>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="版本">
            <el-button type="text" size="medium" v-for="(item, index) in versionsList" :key="index" @click="addForm($route.query.primaryKey, item.formVersion)">{{ item.formVersion }}</el-button>
            <span class="text-color-ccc" v-if="versionsList.length == 0">暂无版本</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20" class="btn-row" v-if="!$route.query.formVersion">
        <el-col :span="24" class="t-right">
          <el-button type="primary" size="mini" @click="saveBtn">保存</el-button>
        </el-col>
      </el-row>
    </el-form>
    <template v-if="$route.query.primaryKey">
      <div v-if="!readonly" class="fix-btn-box" :style="{ height: bannerHeight }">
        <el-button class="form-type-btn" plain type="primary" icon="el-icon-plus" size="mini" v-for="(item, index) in itemTypeList" :key="index" @click="addFormItem(item)">{{ item.label }}</el-button>
      </div>
      <div class="form-info-box">表单信息</div>
      <el-divider></el-divider>
      <template v-if="formItemList.length > 0">
        <el-form v-for="(item, index) in formItemList" :model="item" size="small" :key="index" label-position="left" class="fix-height-box" label-width="120px">
          <el-row :gutter="24" class="btn-row">
            <el-col :span="8">
              <el-form-item label="表项名称" required>
                <el-input maxlength="50" class="full-width" placeholder="请输入表项名称" v-model.trim="item.itemName" :readonly="readonly" @change="setServerLabel(item, index)"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="表项类型" required>
                <el-input class="full-width" :value="itemTypeMap[item.itemType]" disabled></el-input>
              </el-form-item>
            </el-col>

            <!-- <el-col :span="8">
                            <el-form-item label="表项显示">
                                <el-select
                                class="full-width"
                                :readonly="readonly"
                                v-model="item.showType"
                                placeholder="请选择选择类型">
                                <el-option label="两端显示" value="1"></el-option>
                                <el-option label="web显示" value="2"></el-option>
                                <el-option label="移动显示" value="3"></el-option>
                                </el-select>
                            </el-form-item>
                            </el-col> -->

            <el-col :span="8" v-if="item.itemType != 17 && item.itemType != 20">
              <el-form-item label="提示文本">
                <el-input maxlength="50" class="full-width" placeholder="请输入提示文本" v-model.trim="item.itemPlaceholder" :readonly="readonly"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8" v-if="item.itemType == 20">
              <el-form-item label="子表单" required>
                <el-select class="full-width" v-model="item.serverBindLabel" placeholder="请选择子表单">
                  <el-option v-for="(item, index) in childFormList" :key="index" :label="item.formName" :value="item.primaryKey"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8" v-else>
              <el-form-item label="后端字段" required>
                <el-input maxlength="50" class="full-width" placeholder="" v-model.trim="item.serverBindLabel"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8" style="height: 51px" v-if="![17, 22].includes(item.itemType)">
              <el-form-item label="是否必填" required>
                <el-switch v-model="item.isRequire" :disabled="readonly" :active-value="1" :inactive-value="0" active-color="#409EFF" inactive-color="#ff4949"> </el-switch>
              </el-form-item>
            </el-col>

            <el-col :span="8" style="height: 51px" v-if="![17, 22].includes(item.itemType)">
              <el-form-item label="是否可编辑" required>
                <el-switch v-model="item.isEdit" :disabled="readonly" :active-value="1" :inactive-value="0" active-color="#409EFF" inactive-color="#ff4949"> </el-switch>
              </el-form-item>
            </el-col>

            <el-col :span="8" style="height: 51px" required>
              <el-form-item label="是否隐藏">
                <el-switch v-model="item.isRelation" :disabled="readonly" :active-value="1" :inactive-value="0" active-color="#409EFF" inactive-color="#ff4949"> </el-switch>
              </el-form-item>
            </el-col>

            <el-col :span="8" style="height: 51px" v-if="![17, 19, 20, 22].includes(item.itemType)">
              <el-form-item label="展示差异" required>
                <el-switch v-model="item.showDistic" :disabled="readonly" :active-value="1" :inactive-value="0" active-color="#409EFF" inactive-color="#ff4949"> </el-switch>
              </el-form-item>
            </el-col>

            <el-col :span="8" v-if="item.itemType == 20">
              <el-form-item label="最大添加数量">
                <my-el-input max-length="20" type="int" class="full-width" placeholder="请输入最大添加数量" v-model.trim="item.maxValue" :readonly="readonly"></my-el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8" v-if="[1, 2, 3, 4, 5, 6, 15, 16].includes(item.itemType)">
              <el-form-item label="默认值">
                <el-input maxlength="50" class="full-width" placeholder="请输入默认值" v-model.trim="item.defaultValue" :readonly="readonly"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8" v-if="[1, 2, 3, 4, 5, 6, 7, 15, 16].includes(item.itemType)">
              <el-form-item label="返显数据源">
                <el-input maxlength="500" class="full-width" placeholder="请输入返显数据源" v-model.trim="item.backDisplayApi" :readonly="readonly"></el-input>
              </el-form-item>
            </el-col>

            <!-- 1 文本 19 随机数 -->
            <template v-if="item.itemType === 1 || item.itemType === 19">
              <el-col :span="8">
                <el-form-item label="最大字符长度" required>
                  <my-el-input max-length="20" type="int" class="full-width" placeholder="请输入最大字符长度" v-model.trim="item.maxValue" :readonly="readonly"></my-el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="item.itemType != 19">
                <el-form-item label="正则校验">
                  <el-input class="full-width" placeholder="请输入正则校验字符串" v-model.trim="item.notInputStr" :readonly="readonly"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="item.itemType != 19">
                <el-form-item label="正则错误提示">
                  <el-input class="full-width" placeholder="请输入正则校验错误提示" v-model.trim="item.remark" :readonly="readonly"></el-input>
                </el-form-item>
              </el-col>
            </template>

            <!-- 2 数字 3 金额 -->
            <template v-if="item.itemType === 2 || item.itemType === 3">
              <el-col :span="8">
                <el-form-item label="小数位数" required>
                  <my-el-input type="int" class="full-width" placeholder="请输入小数位数" v-model.trim="item.digitNum" :readonly="readonly"></my-el-input>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="最小值">
                  <my-el-input type="int" class="full-width" placeholder="请输入最小值" v-model.trim="item.minValue" :readonly="readonly"></my-el-input>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="最大值">
                  <my-el-input type="int" class="full-width" placeholder="请输入最大值" v-model.trim="item.maxValue" :readonly="readonly"></my-el-input>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="单位">
                  <el-input type="int" class="full-width" placeholder="请输入数值单位" v-model.trim="item.unitListStr" :readonly="readonly"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="正则校验">
                  <el-input class="full-width" placeholder="请输入正则校验字符串" v-model.trim="item.notInputStr" :readonly="readonly"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="正则错误提示">
                  <el-input class="full-width" placeholder="请输入正则校验错误提示" v-model.trim="item.remark" :readonly="readonly"></el-input>
                </el-form-item>
              </el-col>
            </template>

            <!-- 16 计数器 -->
            <template v-if="item.itemType === 16">
              <el-col :span="8">
                <el-form-item label="最小值">
                  <my-el-input type="int" class="full-width" placeholder="请输入最小值" v-model.trim="item.minValue" :readonly="readonly"></my-el-input>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="最大值">
                  <my-el-input type="int" class="full-width" placeholder="请输入最大值" v-model.trim="item.maxValue" :readonly="readonly"></my-el-input>
                </el-form-item>
              </el-col>
            </template>

            <!-- 4 电话 -->
            <template v-if="item.itemType === 4">
              <el-col :span="8">
                <el-form-item label="校验类型">
                  <el-switch v-model="item.isTypeCheck" :disabled="readonly" :active-value="1" :inactive-value="0" active-color="#409EFF" inactive-color="#ff4949"> </el-switch>
                </el-form-item>
              </el-col>
            </template>

            <!-- 5 邮箱-->
            <template v-if="item.itemType === 5">
              <el-col :span="8">
                <el-form-item label="校验类型">
                  <el-switch v-model="item.isTypeCheck" :disabled="readonly" :active-value="1" :inactive-value="0" active-color="#409EFF" inactive-color="#ff4949"> </el-switch>
                </el-form-item>
              </el-col>
            </template>

            <!-- 6 单选 -->
            <template v-if="item.itemType === 6 || item.itemType === 15">
              <el-col :span="8">
                <el-form-item label="数据源">
                  <el-input class="full-width" maxlength="500" placeholder="请输入数据源" v-model.trim="item.dataSourceApi" :readonly="readonly" @keyup.native="judgeSourceBtn(item)"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="选择类型" required>
                  <el-select class="full-width" :readonly="readonly" v-model="item.selectStyle" placeholder="请选择选择类型">
                    <el-option v-for="(item, index) in selectTypeList" :key="index" :label="`${item.value}`" :value="item.key"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </template>

            <!-- 15 多选 -->
            <template v-if="item.itemType === 15">
              <el-col :span="8">
                <el-form-item label="最多可选">
                  <my-el-input type="int" class="full-width" placeholder="请输入" v-model.trim="item.maxValue" :readonly="readonly"></my-el-input>
                </el-form-item>
              </el-col>
            </template>

            <!-- 7 图片 8 视频 9 音频 10 文件 -->
            <template v-if="item.itemType === 7 || item.itemType === 8 || item.itemType === 9 || item.itemType === 10">
              <el-col :span="8">
                <el-form-item label="最大上传数">
                  <my-el-input type="int" class="full-width" placeholder="请输入" v-model.trim="item.maxValue" :readonly="readonly"></my-el-input>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="最大上传（M）">
                  <my-el-input type="float" class="full-width" placeholder="请输入" v-model.trim="item.uploadFileMaxSize" :readonly="readonly"></my-el-input>
                </el-form-item>
              </el-col>
            </template>

            <!-- 7 图片-->
            <template v-if="item.itemType === 7">
              <el-col :span="8">
                <el-form-item label="文件格式">
                  <el-select class="full-width" multiple :readonly="readonly" v-model="item.fileType" placeholder="请选择文件格式">
                    <el-option v-for="(item, index) in imageFileTypeList" :key="index" :label="item" :value="item"> </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="上传方式" required>
                  <el-select class="full-width" multiple :readonly="readonly" v-model="item.uploadMethod" placeholder="请选择上传方式">
                    <el-option v-for="(item, index) in imageUploadMethodList" :key="index" :label="`${item.value}`" :value="item.key"> </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="8">
                                    <el-form-item label="图片处理">
                                    <el-select
                                        class="full-width"
                                        multiple
                                        collapse-tags
                                        v-model="item.imageSpecialDeal"
                                        placeholder="请选择选择处理类型">
                                        <el-option
                                        v-for="(item,index) in dealTypeList"
                                        :key="index"
                                        :label="`${item.value}`"
                                        :value="item.key">
                                        </el-option>
                                    </el-select>
                                    </el-form-item>
                                </el-col> -->
            </template>

            <!-- 8 视频 -->
            <template v-if="item.itemType === 8">
              <el-col :span="8">
                <el-form-item label="文件格式">
                  <el-select class="full-width" multiple :readonly="readonly" v-model="item.fileType" placeholder="请选择文件格式">
                    <el-option v-for="(item, index) in videoFileTypeList" :key="index" :label="item" :value="item"> </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="上传方式" required>
                  <el-select class="full-width" multiple :readonly="readonly" v-model="item.uploadMethod" placeholder="请选择上传方式">
                    <el-option v-for="(item, index) in imageUploadMethodList" :key="index" :label="`${item.value}`" :value="item.key"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </template>

            <!-- 9 音频 -->
            <template v-if="item.itemType === 9">
              <el-col :span="8">
                <el-form-item label="文件格式">
                  <el-select class="full-width" multiple :readonly="readonly" v-model="item.fileType" placeholder="请选择文件格式">
                    <el-option v-for="(item, index) in audioFileTypeList" :key="index" :label="item" :value="item"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="上传方式" required>
                  <el-select class="full-width" multiple :readonly="readonly" v-model="item.uploadMethod" placeholder="请选择上传方式">
                    <el-option v-for="(item, index) in imageUploadMethodList" :key="index" :label="`${item.value}`" :value="item.key"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </template>

            <!-- 10 文件 -->
            <template v-if="item.itemType === 10">
              <el-col :span="8">
                <el-form-item label="文件格式">
                  <el-select class="full-width" multiple :readonly="readonly" v-model="item.fileType" placeholder="请选择文件格式">
                    <el-option v-for="(item, index) in fileTypeList" :key="index" :label="item" :value="item"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </template>

            <!-- 11 日期时间 -->
            <template v-if="item.itemType === 11">
              <el-col :span="8">
                <el-form-item label="存储格式">
                  <el-select class="full-width" v-model="item.dateFormate" :readonly="readonly" placeholder="请选择存储格式">
                    <el-option v-for="(item, index) in timeTypeMap" :key="index" :label="item.value" :value="item.key"> </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <template v-if="item.dateFormate == 'datetime'">
                <el-col :span="8">
                  <el-form-item label="最小时间">
                    <el-date-picker class="full-width" v-model="item.minValue" type="datetime" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm" :readonly="readonly" clearable placeholder="选择日期时间"> </el-date-picker>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="最大时间">
                    <el-date-picker class="full-width" v-model="item.maxValue" type="datetime" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm" :readonly="readonly" clearable placeholder="选择日期时间"> </el-date-picker>
                  </el-form-item>
                </el-col>
              </template>
              <template v-if="item.dateFormate == 'date'">
                <el-col :span="8">
                  <el-form-item label="最小时间">
                    <el-date-picker class="full-width" v-model="item.minValue" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :readonly="readonly" clearable placeholder="选择日期"> </el-date-picker>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="最大时间">
                    <el-date-picker class="full-width" v-model="item.maxValue" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :readonly="readonly" clearable placeholder="选择日期"> </el-date-picker>
                  </el-form-item>
                </el-col>
              </template>

              <template v-if="item.dateFormate == 'year-month'">
                <el-col :span="8">
                  <el-form-item label="最小时间">
                    <el-date-picker class="full-width" v-model="item.minValue" type="month" value-format="yyyy-MM" format="yyyy-MM" :readonly="readonly" clearable placeholder="选择月份"> </el-date-picker>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="最大时间">
                    <el-date-picker class="full-width" v-model="item.maxValue" type="month" value-format="yyyy-MM" format="yyyy-MM" :readonly="readonly" clearable placeholder="选择月份"> </el-date-picker>
                  </el-form-item>
                </el-col>
              </template>

              <template v-if="item.dateFormate == 'time'">
                <el-col :span="8">
                  <el-form-item label="最小时间">
                    <el-time-select
                      class="full-width"
                      v-model="item.minValue"
                      :picker-options="{
                        start: '00:00',
                        step: '00:30',
                        end: '24:00',
                      }"
                      value-format="HH:mm"
                      format="HH:mm"
                      :readonly="readonly"
                      clearable
                      placeholder="选择时间"
                    >
                    </el-time-select>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="最大时间">
                    <el-time-select
                      class="full-width"
                      v-model="item.maxValue"
                      :picker-options="{
                        start: '00:00',
                        step: '00:30',
                        end: '24:00',
                      }"
                      value-format="HH:mm"
                      format="HH:mm"
                      :readonly="readonly"
                      clearable
                      placeholder="选择时间"
                    >
                    </el-time-select>
                  </el-form-item>
                </el-col>
              </template>
            </template>
            <!-- 12 地图 -->
            <template v-if="item.itemType === 12">
              <el-col :span="8">
                <el-form-item label="选择页路径">
                  <el-input class="full-width" placeholder="请输入选择页路径" v-model.trim="item.dataSourceApi" :readonly="readonly"></el-input>
                </el-form-item>
              </el-col>
            </template>
            <!-- 13 外部链接 -->
            <template v-if="item.itemType === 13">
              <el-col :span="8">
                <el-form-item label="全路径检测" required>
                  <el-switch v-model="item.isTypeCheck" :disabled="readonly" :active-value="1" :inactive-value="0" active-color="#409EFF" inactive-color="#ff4949"> </el-switch>
                </el-form-item>
              </el-col>
            </template>
            <!-- 14 表单附件 -->
            <template v-if="item.itemType === 14">
              <el-col :span="8">
                <el-form-item label="最大上传数" required>
                  <my-el-input type="int" class="full-width" placeholder="请输入" v-model.trim="item.maxValue" :readonly="readonly"></my-el-input>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="选择页路径" required>
                  <el-input class="full-width" placeholder="请输入选择页路径" v-model.trim="item.dataSourceApi" :readonly="readonly"></el-input>
                </el-form-item>
              </el-col>
            </template>
          </el-row>
          <el-row :gutter="20" class="btn-row">
            <el-col :span="24" class="t-right">
              <el-button v-if="(item.itemType == 6 || item.itemType == 15) && item.showSourceBtn" type="info" size="small" @click="showDataSource(item, index)">自定义数据源</el-button>
              <el-button type="info" size="mini" @click="showRelation(item)" v-if="item.itemType != 22">表项关联</el-button>
              <el-button type="info" size="mini" @click="showCheck(item)" v-if="item.itemType != 22">校验设置</el-button>
              <el-button type="danger" size="mini" @click="deleteFormItem(item)">删除</el-button>
              <el-button type="primary" size="mini" @click="saveFormItem(item)">保存</el-button>
            </el-col>
          </el-row>
          <el-divider></el-divider>
        </el-form>
      </template>
      <div v-else class="no-content-box">暂无表单配置项!!!</div>
    </template>

    <el-dialog title="校验设置" :visible.sync="isCheckDialog" width="700px">
      <el-form ref="checkForm" size="small" label-position="left" :model="checkData" :rules="checkRules" label-width="120px" @submit.native.prevent>
        <el-form-item label="是否校验" prop="isApiCheck">
          <el-switch v-model="checkData.isApiCheck" :disabled="readonly" :active-value="1" :inactive-value="0" active-color="#409EFF" inactive-color="#ff4949"> </el-switch>
        </el-form-item>

        <el-form-item label="触发时机" prop="apiCheckType">
          <el-select class="full-width" v-model="checkData.apiCheckType" placeholder="请选择触发时机">
            <el-option v-for="(item, index) in triggerTimeList" :key="index" :label="item.value" :value="item.key"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="校验接口" prop="apiCheckUrl">
          <el-input class="full-width" placeholder="请输入校验接口" v-model.trim="checkData.apiCheckUrl" :readonly="readonly"></el-input>
        </el-form-item>

        <el-form-item label="入参表项" prop="apiCheckParams">
          <el-select class="full-width" multiple collapse-tags v-model="checkData.apiCheckParams" placeholder="请选择入参表项">
            <el-option v-for="(item, index) in formItemList" :key="index" :label="item.itemName" :value="item.primaryKey"> </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="isCheckDialog = false" size="small" class="el-button-reset">取 消</el-button>
        <el-button type="primary" size="small" @click="checkVaild()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="表项关联" :visible.sync="isRelationDialog" width="72%" class="set-max-height">
      <el-form size="small" label-position="left" label-width="100px" class="guanlian-box" @submit.native.prevent>
        <template v-for="(item, index) in relationList">
          <el-row :gutter="20" :key="index">
            <el-col :span="7">
              <el-form-item label="表单">
                <el-select ref="selectFormItem" filterable class="full-width" v-model="item.itemRelationFormKey" placeholder="请选择表单" @change="getFrontItemList(item.itemRelationFormKey, item)">
                  <el-option v-for="(item, index) in presentFormList" :key="index" :label="item.formName" :value="item.primaryKey"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="7">
              <el-form-item label="前置表项">
                <el-select ref="selectFormItem" filterable class="full-width" v-model="item.itemRelationKey" placeholder="请选择前置表项">
                  <el-option v-for="(item, index) in item.frontItemList" :key="index" :label="item.itemName" :value="item.primaryKey"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="7">
              <el-form-item label="影响结果">
                <el-select class="full-width" v-model="item.resultAction" placeholder="请选择影响结果">
                  <el-option v-for="(item, index) in effectResultList" :key="index" :label="item.value" :value="item.key"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="7">
              <el-form-item label="判断方式">
                <el-select class="full-width" v-model="item.itemType" placeholder="请选择校验方式">
                  <el-option label="and" :value="1"></el-option>
                  <el-option label="or" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="7">
              <el-form-item label="校验方式">
                <el-select class="full-width" v-model="item.checkMethod" placeholder="请选择校验方式">
                  <el-option v-for="(item, index) in checkTypeList" :key="index" :label="item.value" :value="item.key"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="7" v-if="[1, 2, 3, 4, 5, 6, 10, 11].includes(item.checkMethod)">
              <el-form-item label="校验值">
                <template v-if="item.checkMethod == 11 || item.checkMethod == 3 || item.checkMethod == 6">
                  <el-input class="full-width" placeholder="请输入校验值" v-model.trim="item.checkValue" :readonly="readonly"></el-input>
                </template>
                <template v-else>
                  <my-el-input type="int" class="full-width" placeholder="请输入校验值" v-model.trim="item.checkValue" :readonly="readonly"></my-el-input>
                </template>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-button type="danger" size="small" icon="el-icon-delete" @click="deleteRelation(index)"></el-button>
            </el-col>
          </el-row>
        </template>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button size="small" class="el-button-reset" @click="addRelation">新 增</el-button>
        <el-button type="primary" size="small" @click="saveRelation">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="自定义数据源" :visible.sync="isSourceDialog" width="50%" class="set-max-height" :close-on-click-modal="false">
      <el-form size="small" label-position="left" label-width="70px" @submit.native.prevent>
        <template v-for="(item, index) in sourceList">
          <el-row :gutter="20" :key="index">
            <el-col :span="11">
              <el-form-item label="key">
                <el-input class="full-width" placeholder="请输入" v-model.trim="item.value"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="value">
                <el-input class="full-width" placeholder="请输入" v-model.trim="item.label"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-button icon="el-icon-delete" type="success" size="small" plain @click="deleteSource(index)"></el-button>
            </el-col>
          </el-row>
        </template>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button size="small" class="el-button-reset" @click="addDataSource">新 增</el-button>
        <el-button type="primary" size="small" @click="saveDataSource">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 样式设置 -->
    <el-dialog :title="styleType == 'web' ? 'web样式' : '移动样式'" :visible.sync="isShowStyle" width="80%" class="set-max-height" :close-on-click-modal="false">
      <template v-if="styleType == 'web'">
        <form-web ref="formWeb" :item-data="itemData"></form-web>
      </template>
      <template v-if="styleType == 'mobile'">
        <form-app ref="formApp" :item-data="itemData"></form-app>
      </template>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" class="el-button-reset" @click="hideStyle">关 闭</el-button>
        <el-button type="primary" size="small" @click="saveStyleFn">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 二维码 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <div class="er-code-totle">请用企业微信扫描</div>
      <div class="qrcode" ref="qrCodeUrl"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 克隆表单 -->
    <el-dialog title="克隆表单" :visible.sync="cloneFormDialog" width="50%" class="firm-dialog">
      <el-input size="small" class="full-width m-b-m" placeholder="按名称搜索" v-model.trim="formName">
        <el-button slot="append" icon="el-icon-search" size="mini" @click="getFormAllList(1)"></el-button>
      </el-input>
      <el-radio class="firm-item" v-for="(item, index) in formList" :key="index" v-model="cloneKey" :label="item.primaryKey">{{ item.formName }}</el-radio>
      <el-pagination class="page-box t-right m-t-s" @current-change="getFormAllList" layout="prev, pager, next" :page-size="queryParams.pageSize" :total="queryParams.total"></el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="saveCloneForm">确 认</el-button>
        <el-button size="mini" @click="cloneFormDialog = false">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog title="版本管理" :visible.sync="versionDialog" width="50%" class="set-max-height" :close-on-click-modal="false">
      <el-form size="small" label-position="left" ref="ruleForm" :model="versionData" label-width="70px" @submit.native.prevent>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="版本号" prop="formVersion" :rules="{ required: true, message: '请填写版本号', trigger: ['blur'] }">
              <el-input class="full-width" placeholder="请输入" v-model.trim="versionData.formVersion"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="描述" prop="remark" :rules="{ required: true, message: '请填写描述', trigger: ['blur'] }">
              <el-input class="full-width" type="textarea" rows="3" placeholder="请输入" v-model.trim="versionData.remark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button size="small" class="el-button-reset" @click="versionDialog = false">取 消</el-button>
        <el-button type="primary" size="small" @click="saveVersion">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import $ from 'jquery';
  import md5 from 'js-md5';
  import axios from 'axios';
  import Vue from 'vue';
  import { translate, apiFormCreate, apiFormUpdate, getChildForm, apiFormDetail, apiFormDelete, apiFormList, formItemCreate, apiFormClone, formItemUpdate, formItemList, formItemDelete, procConfigsUpdate, apiVersionList, apiVersionAdd, apiCcManageUpdate } from '../../../api/process';
  import formWeb from './formWeb';
  import formApp from './formApp';
  import initForm from '@g/js/initForm';
  import configData from '@g/js/configData';
  import {formValid,transformStr,titleCase} from '@g/js/utils';
  import translateConfig from '@/lib/translate';
  import formConfig from '@/lib/formMenu';
  export default {
    props: {
      pageType: {
        type: String,
        default: '',
      },
      processName: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        //表现关联影响结果list
        effectResultList: [],
        cloneFormDialog: false, //克隆弹框
        cloneKey: '', //克隆表单的key
        formName: '', //表单查询条件
        formList: [],
        bannerHeight: '',
        direction: 'transverse',
        dialogVisible: false,
        itemTypeList: [],
        itemTypeMap: {},
        applicationList: [],
        formItemList: [],
        // 选择类型
        selectTypeList: [],
        imageFileTypeList: ['jpg', 'jpeg', 'png', 'gif', 'bmp'],
        videoFileTypeList: ['avi', 'mp4', 'wmv', 'mpeg', 'mpg', 'mov', 'rm', 'ram', 'swf', 'flv'],
        audioFileTypeList: ['mp3'],
        // 文件类型
        fileTypeList: ['xls', 'txt', 'docx', 'pdf'],
        // 回显格式
        timeTypeMap: [],
        // 地图类型
        mapTypeList: [],
        // 上传方式
        imageUploadMethodList: [],
        // 处理方式
        dealTypeList: [],
        // 触发时机
        triggerTimeList: [],
        // 校验方式
        checkTypeList: [],
        // 版本号list
        versionsList: [],
        operateIndex: 0,
        isCheckDialog: false,
        checkData: {},
        isRelationDialog: false,
        relationList: [{}],
        sourceList: [],
        isSourceDialog: false, //是否展示数据源弹框
        presentIndex: '',
        presentItem: {},
        styleType: '',
        isShowStyle: false,
        childFormList: [], //子表单list
        isRelationFlag: false, //是否是前置表项
        presentFormList: [], //当前表单关联的所有表单
        afterSaveFormVersion: '', //第一次保存的版本号，知识保存成功后用一次
        versionDialog: false,
        versionData: {
          formVersion: '',
          remark: '',
        },
        itemData: {
          formStyle: 1,
          showType: '1',
          formName: '',
          formCode: '',
          status: '',
          detailApi: '',
          createApi: '',
          updateApi: '',
          initApi: '',
          formSavePrimaryKeyLabel: '',
          formPrimaryKeyLabel: '',
          formBtnText: '',
          formDesc: '',
          applicationList: [
            {
              status: '',
              appName: '',
              appCode: '',
              primaryKey: '',
              formVersion: '',
            },
          ],
        },
        rules: {
          formName: [
            {
              required: true,
              message: '请输入表单名称',
              trigger: ['blur', 'change'],
            },
          ],
        },
        checkRules: {
          apiCheckType: [
            {
              required: true,
              message: '请选择触发时机',
              trigger: ['blur', 'change'],
            },
          ],
          apiCheckUrl: [
            {
              required: true,
              message: '请填写入参接口',
              trigger: ['blur', 'change'],
            },
          ],
          apiCheckParams: [
            {
              required: true,
              message: '请选择入参表项',
              trigger: ['blur', 'change'],
            },
          ],
        },
        queryParams: {
          currentPage: 1,
          pageSize: 20,
          total: 0,
        },
      };
    },
    beforeMount: function () {
      this.bannerHeight = $(window).height() - 100 + 'px';
    },
    mounted() {
      for (var i in formConfig) {
        this[i] = formConfig[i];
      }
    },
    methods: {
      //版本list
      async getVersionList() {
        let res = await apiVersionList({ formKey: this.$route.query.primaryKey });
        this.versionsList = res.rows || [];
      },
      //新增版本号
      addVersion() {
        this.versionDialog = true;
        this.versionData.formVersion = '';
        this.versionData.remark = '';
      },
      saveVersion() {
        formValid(this, 'ruleForm', this.saveFn);
      },
      async saveFn() {
        this.versionData.formKey = this.$route.query.primaryKey;
        let res = await apiVersionAdd(this.versionData);
        if (res.success) {
          this.getVersionList();
          this.$message.success(res.message);
        } else {
          this.$message.error(res.message);
        }
      },
      //克隆表单
      async cloneForm() {
        await this.getFormAllList(1);
        this.cloneFormDialog = true;
      },
      //克隆表单确认
      async saveCloneForm() {
        if (!this.cloneKey) {
          this.$message.warning('请选择一个表单');
          return;
        }

        let res = await apiFormClone(this.cloneKey);

        if (res.success) {
          this.cloneKey = '';
          if (this.pageType == 'open') {
            this.getInfoUrl(res.primaryKey, res.message);
          } else {
            if (this.$route.query.ccType) {
              this.updateMangerCC(res.primaryKey);
            } else {
              this.updateFlowInfo(res.primaryKey, '');
            }
          }
        } else {
          this.$message.error(res.message);
        }
      },
      //表单列表
      async getFormAllList(currentPage = 1) {
        this.queryParams.currentPage = currentPage || this.queryParams.currentPage;
        let params = {
          formType: 1,
          pageSize: this.queryParams.pageSize,
          currentPage: this.queryParams.currentPage,
          formName: this.formName || null,
        };
        //表项关联带key查
        if (this.isRelationFlag) {
          if (this.$route.query.primaryKey) {
            params.parentKey = this.$route.query.primaryKey;
          } else {
            params.parentKey = this.itemData.primaryKey || null;
          }
        }
        let res = await apiFormList(params);
        // let list = []
        // res.rows.forEach(item=>{
        //     if (!item.parentFormKey) {
        //         list.push(item)
        //     }
        // })
        this.formList = res.rows || [];
        this.queryParams.total = Number(res.total);
        // this.presentFormList = res.rows || []
      },
      async getFormList() {
        let params = {
          formType: 1,
          pageSize: 500,
          currentPage: 1,
          formName: this.formName || null,
        };
        //表项关联带key查
        if (this.isRelationFlag) {
          if (this.$route.query.primaryKey) {
            params.parentKey = this.$route.query.primaryKey;
          } else {
            params.parentKey = this.itemData.primaryKey || null;
          }
        }
        let res = await apiFormList(params);
        this.presentFormList = res.rows || [];
      },
      //页面初始化
      async getInfo() {
        if (this.$route.query.primaryKey) {
          await this.getDetail();
          this.getChildFormList();
          this.getFormItemList();
          this.getVersionList();
        } else {
          this.itemData.formName = this.processName;
        }
      },
      //创建表单后自动生成3个默认字段
      initFormData() {
        let data = initForm.initFrom();
        data.forEach(async item => {
          item.formKey = this.$route.query.primaryKey;
          item.formVersion = this.afterSaveFormVersion;
          await formItemCreate(item);
          this.getFormItemList();
        });
      },
      //表单基本信息
      async getDetail() {
        let res = await apiFormDetail(this.$route.query.primaryKey);

        if (res.success) {
          if (!res.applicationList) {
            res.applicationList = [{}];
          }
          this.itemData = res;
          // this.$route.query.formVersion有值说明是来更改表单的
          if (this.$route.query.formVersion) {
            this.itemData.formVersion = this.$route.query.formVersion;
          }
          this.$emit('change', this.itemData);
        }
      },
      async getFormItemList() {
        let res = await formItemList({
          formKey: this.$route.query.primaryKey,
          formVersion: this.itemData.formVersion,
        });
        if (res.success) {
          res.rows.forEach(item => {
            item.showSourceBtn = item.dataSourceApi ? false : true;
          });
          this.formItemList = JSON.parse(JSON.stringify(res.rows)) || [];
        }
      },
      async getFrontItemList(key, item) {
        let res = await formItemList({ formKey: key, formVersion: this.itemData.formVersion });
        if (res.success) {
          let list = JSON.parse(JSON.stringify(res.rows)) || [];
          this.$set(item, 'frontItemList', list);
        }
      },
      applicationChange(index) {
        let selectIndex = this.$refs.selectApplication[0].hoverIndex;
        this.itemData.applicationList[index].appName = this.applicationList[selectIndex].name;
        this.itemData.applicationList[index].primaryKey = this.applicationList[selectIndex].primaryKey;
      },
      addApplication() {
        this.itemData.applicationList.push({
          status: '',
          appName: '',
          appCode: '',
          primaryKey: '',
        });
      },
      deleteApplication(index) {
        this.itemData.applicationList.splice(index, 1);
      },
      saveBtn() {
        // 防止频繁保存
        let that = this;
        this.$refs.baseInfo.validate(valid => {
          if (valid) {
            let length = this.itemData.applicationList.length;
            let num = 0;
            this.itemData.applicationList.forEach(item => {
              if (item.appCode) {
                num++;
              }
            });
            if (that.isPost) {
              this.$message({
                message: '操作太频繁！',
                type: 'warning',
              });
              return;
            }
            this.isPost = true;
            setTimeout(() => {
              that.isPost = false;
            }, 3000);
            this.itemData.formType = 1;
            this.save();
          } else {
            this.$message({
              message: '请输入必填项!',
              type: 'warning',
            });
          }
        });
      },
      async save() {
        this.itemData.formStyle = 1;
        //子表单的情况
        this.itemData.parentFormKey = this.pageType ? this.$route.query.key : '';
        let res = this.itemData.primaryKey ? await apiFormUpdate(this.itemData) : await apiFormCreate(this.itemData);
        if (res.success) {
          if (!this.itemData.primaryKey && !this.pageType) {
            this.afterSaveFormVersion = res.extend.formVersion;
          }
          if (this.pageType == 'open') {
            this.getInfoUrl(res.key, res.message);
          } else {
            if (this.$route.query.ccType) {
              this.updateMangerCC(res.key);
            } else {
              this.updateFlowInfo(res.key);
            }
          }
        } else {
          this.$message.error(res.message);
        }
      },
      async updateFlowInfo(formKey) {
        let res = await procConfigsUpdate({
          primaryKey: this.$route.query.key,
          formKey: formKey,
          formName: this.itemData.formName,
        });
        if (res.success) {
          this.getInfoUrl(formKey);
        } else {
          this.$message.error(res.message);
        }
      },
      async updateMangerCC(formKey) {
        let res = await apiCcManageUpdate({
          primaryKey: this.$route.query.key,
          formKey: formKey,
          formName: this.itemData.formName,
        });
        if (res.success) {
          this.getInfoUrl(formKey, res.message);
        } else {
          this.$message.error(res.message);
        }
      },
      //获取保存后跳转的页面
      getInfoUrl(key, message) {
        let toUrl = '';
        if (this.pageType == 'open') {
          toUrl = {
            name: 'form-info',
            query: {
              key: this.$route.query.key,
              primaryKey: key,
            },
          };
        } else {
          if (!!this.$route.query.ccType) {
            toUrl = {
              name: 'manageDetil',
              query: {
                tab: this.$route.query.tab,
                key: this.$route.query.key,
                strucCode: this.$route.query.strucCode,
                primaryKey: key,
                ccType: 'cc',
                processPrimaryKey: this.$route.query.processPrimaryKey,
              },
            };
          } else {
            toUrl = {
              name: 'flow-info',
              query: {
                tab: this.$route.query.tab,
                key: this.$route.query.key,
                strucCode: this.$route.query.strucCode,
                primaryKey: key,
              },
            };
          }
        }
        this.$router.replace(toUrl);
        if (!this.itemData.primaryKey && this.pageType != 'open' && !this.cloneFormDialog && !this.$route.query.ccType) {
          this.initFormData();
        }
        this.getInfo(); //初始化页面数据
        this.cloneFormDialog = false;
        this.$message.success(message);
      },
      async addFormItem(item) {
        let param = {
          itemType: item.id,
          itemName: item.label,
          showType: 1,
          formKey: this.$route.query.primaryKey,
          formVersion: this.itemData.formVersion,
          isEdit: 1,
        };

        let res = await formItemCreate(param);
        if (res.success) {
          this.getFormItemList();
        } else {
          this.$message.error(res.message);
        }
      },
      async deleteFormItem(item) {
        let res = await formItemDelete(item.primaryKey);
        if (res.success) {
          this.$message.success('删除成功');
          this.getFormItemList();
        } else {
          this.$message.error(res.message);
        }
      },
      async saveFormItem(item) {
        if (!item.itemName) {
          this.$message({
            message: '请填写表项名称！',
            type: 'warning',
          });
          return;
        }
        if (!item.serverBindLabel) {
          this.$message({
            message: '请填写后端字段！',
            type: 'warning',
          });
          return;
        }

        if (item.itemType === 1 && !item.maxValue) {
          this.$message({
            message: '请填写最多输入数！',
            type: 'warning',
          });
          return;
        }

        if (item.itemType === 2 || item.itemType === 3) {
          if (!item.digitNum && item.digitNum != 0) {
            this.$message({
              message: '请填写小数位数！',
              type: 'warning',
            });
            return;
          }
        }

        if (item.itemType === 6) {
          if (!item.dataSourceApi && !item.remark) {
            this.$message({
              message: '请填写数据源 或者 配置自定义数据源！',
              type: 'warning',
            });
            return;
          }

          if (!item.selectStyle) {
            this.$message({
              message: '请选择选择类型！',
              type: 'warning',
            });
            return;
          }
        }

        if (item.itemType === 7 || item.itemType === 8 || item.itemType === 9) {
          if (!item.uploadMethod) {
            this.$message({
              message: '请选择上传方式！',
              type: 'warning',
            });
            return;
          }
        }

        if (item.itemType === 11) {
          if (item.minValue && item.maxValue) {
            if (item.minValue >= item.maxValue) {
              this.$message({
                message: '最晚开始时间不能大于等于最晚结束时间！',
                type: 'warning',
              });
              return;
            }
          }
        }

        if (item.itemType === 12 && !item.dataSourceApi) {
          this.$message({
            message: '请输入选择页路径！',
            type: 'warning',
          });
          return;
        }

        if (item.itemType === 14 && !item.dataSourceApi) {
          this.$message({
            message: '请输入选择页路径！',
            type: 'warning',
          });
          return;
        }

        if (item.maxValue === null) {
          item.maxValue = '';
        }

        if (item.minValue === null) {
          item.minValue = '';
        }

        let res = await formItemUpdate(item);
        if (res.success) {
          this.$message.success('保存成功');
        } else {
          this.$message.error(res.message);
        }
      },
      showCheck(item) {
        this.checkData = Object.assign({}, item);
        this.isCheckDialog = true;
        setTimeout(() => {
          this.$refs.checkForm.clearValidate();
        }, 100);
      },
      checkVaild() {
        // 防止频繁保存
        let that = this;
        this.$refs.checkForm.validate(valid => {
          if (valid) {
            this.isPost = true;
            setTimeout(() => {
              that.isPost = false;
            }, 3000);
            this.saveCheck();
          } else {
            this.$message({
              message: '请输入必填项!',
              type: 'warning',
            });
          }
        });
      },
      async saveCheck() {
        let res = await formItemUpdate(this.checkData);
        if (res.success) {
          this.$message.success('保存成功');
          this.isCheckDialog = false;
          this.getFormItemList();
        } else {
          this.$message.error(res.message);
        }
      },

      //表项关联
      async showRelation(item) {
        this.isRelationFlag = true;
        this.checkData = Object.assign({}, item);
        this.relationList = [].concat(this.checkData.relationList ? (this.checkData.relationList.length ? this.checkData.relationList : [{}]) : [{}]);
        await this.getFormList();
        await this.relationList.forEach(item => {
          if (item.itemRelationFormKey) {
            this.getFrontItemList(item.itemRelationFormKey, item);
          }
        });
        this.isRelationDialog = true;
      },
      //自定义数据源
      showDataSource(item, index) {
        this.checkData = Object.assign({}, item);
        this.isSourceDialog = true;
        this.presentIndex = index;
        this.presentItem = item;
        this.sourceList = item.remark ? JSON.parse(item.remark) : [];
      },
      //新增数据源
      addDataSource() {
        this.sourceList.push({ value: '', label: '' });
      },
      //删除数据源
      deleteSource(index) {
        this.sourceList.splice(index, 1);
      },
      //保存数据源
      saveDataSource() {
        this.presentItem.remark = JSON.stringify(this.sourceList);
        this.isSourceDialog = false;
        this.saveFormItem(this.presentItem);
      },
      //判断显示自定义是剧院与否
      judgeSourceBtn(item) {
        item.showSourceBtn = item.dataSourceApi ? false : true;
        if (item.dataSourceApi) {
          this.sourceList = [];
          item.remark = '';
        }
      },
      addRelation() {
        this.relationList.unshift({
          frontItemList: [],
        });
      },
      deleteRelation(index) {
        this.relationList.splice(index, 1);
      },
      itemKeyChange(index) {
        let selectIndex = this.$refs.selectFormItem[0].hoverIndex;
        this.relationList[index].itemType = this.formItemList[selectIndex].itemType;
      },
      checkMethodChange(index) {
        this.relationList[index].checkValue = '';
      },
      async getChildFormList() {
        let res = await getChildForm({ parentFormKey: this.$route.query.primaryKey });
        this.childFormList = res.rows || [];
      },
      async saveRelation() {
        let length = this.relationList.length;
        let num = 0;
        this.relationList.forEach((item, index) => {
          if ([7, 8, 9].includes(item.checkMethod)) {
            item.checkValue = 'init';
          }
          if (item.itemRelationKey && item.itemRelationFormKey && item.resultAction && item.checkMethod && item.checkValue) {
            item.itemKey = this.checkData.primaryKey;
            item.formKey = this.checkData.formKey;
            num++;
          }
        });
        if (length != num) {
          this.$message({
            message: '请填写完整表项关联！',
            type: 'warning',
          });
          return;
        }

        let checkData = this.checkData;
        checkData.relationList = this.relationList;

        let res = await formItemUpdate(checkData);
        if (res.success) {
          this.$message.success('保存成功');
          this.isRelationDialog = false;
          this.isRelationFlag = false;
          this.getFormItemList();
        } else {
          this.$message.error(res.message);
        }
      },
      //显示样式弹框
      showStyle(mask) {
        let refName = mask == 'web' ? 'formWeb' : 'formApp';
        this.styleType = mask;
        this.isShowStyle = true;
        this.$nextTick(() => {
          this.$refs[refName].getList();
        });
      },
      //隐藏样式弹框
      hideStyle() {
        this.styleType = '';
        this.isShowStyle = false;
      },
      //保存样式设置
      saveStyleFn() {
        let refName = this.styleType == 'web' ? 'formWeb' : 'formApp';
        this.$refs[refName].saveStyle();
        this.isShowStyle = false;
      },
      //新增子表单
      addForm(primaryKey, formVersion) {
        let params = {
          name: 'form-info',
          query: {
            key: this.$route.query.primaryKey,
            formVersion: formVersion || '',
          },
        };
        console.log(formVersion);
        if (primaryKey) {
          params.query.primaryKey = primaryKey;
        }
        if (formVersion) {
          params.query.formVersion = formVersion;
        }
        let router = this.$router.resolve(params);
        window.open(router.href, '_blank');
      },
      //删除子表单
      deleteChild(item) {
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(async () => {
            let res = await apiFormDelete(item.primaryKey);
            if (res.success) {
              this.$message.success('删除成功!');
              this.getChildFormList();
            } else {
              this.$message.error(res.message);
            }
          })
          .catch(() => {});
      },
      //翻译
      async setServerLabel(item, index) {
        let param = {
          q: item.itemName,
          from: 'zh',
          to: 'en',
          appid: translateConfig.appId,
          salt: '1435660288',
        };

        let str = translateConfig.appId + item.itemName + '1435660288' + translateConfig.secretKey;
        param.sign = md5(str);

        if (item.itemName) {
          $.ajax({
            url: translateConfig.sourceUrl,
            type: 'get',
            dataType: 'jsonp',
            data: param,
            success: data => {
              if (data.trans_result && data.trans_result.length > 0) {
                let value = data.trans_result[0].dst;
                value = value.replace(/\s+/g, '-');
                value = transformStr(value);
                value = titleCase(value);
                item.serverBindLabel = value;
                Vue.set(this.formItemList, index, item);
              }
            },
          });
        }
      },
      //浏览
      preview(type) {
        let url = configData.configData.pcDomain + `/preview?formId=${this.$route.query.primaryKey}&agentId=2c813268ebcf4aa1bbb75864f4c1d75d&isErCoe=true&processCode=${this.$route.query.key}`;
        if (type == 'mobile') {
          this.toMobilePreview();
        } else {
          window.open(url, '_blank');
        }
      },
      toMobilePreview() {
        this.dialogVisible = true;
        $('.qrcode').html('');
        let url = configData.configData.mobileDomain + `/dynamicFormApply?formId=${this.$route.query.primaryKey}&processCode=${this.$route.query.key}&agentCode=2c813268ebcf4aa1bbb75864f4c1d75d&isErCoe=true&agentId=${configData.loginData.agentId}&organizeCode=${configData.loginData.organizeCode}`;
        this.$nextTick(() => {
          var qrcode = new QRCode(this.$refs.qrCodeUrl, {
            text: url, // 需要转换为二维码的内容
            width: 100,
            height: 100,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H,
          });
        });
      },
    },
    computed: {
      readonly() {
        return false;
      },
      headerReadly() {
        return this.$route.query.formVersion ? true : false;
      },
    },
    components: {
      formWeb,
      formApp,
    },
  };
</script>
<style lang="scss">
  .firm-item {
    width: 50%;
    margin: 0 0 15px 0;
  }
  .firm-dialog .el-dialog__body {
    height: 500px;
    overflow-y: auto;
  }
  .form-type-btn {
    margin: 5px 10px 5px 0 !important;
    padding: 8px 5px;
  }
  .er-code-totle {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }
  .reset-input-box {
    display: flex;

    .el-tag {
      margin-left: 10px;
    }

    .el-button {
      margin-left: 10px;
    }
  }

  .set-max-height {
    .el-dialog__body {
      min-height: 300px;
      max-height: 500px;
      overflow-y: scroll;
    }
  }
  .fix-height-box .el-col-8 {
    height: 50px !important;
  }
  .child-box {
    width: 100%;
    float: left;
    display: flex;
    justify-content: space-between;
  }
  .form-info-box {
    font-size: 14px;
    font-weight: 900;
  }
  .fix-btn-box {
    overflow-x: hidden;
    overflow-y: scroll;
    min-height: 700px;
    position: fixed;
    left: 48px;
    top: 90px;
    display: flex;
    flex-direction: column;
  }
  .fix-btn-box::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 2px; /*高宽分别对应横竖滚动条的尺寸*/
  }
  .fix-btn-box::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
    background: #f1f1f1;
  }
  .guanlian-box .el-input {
    display: block;
  }
</style>
